<div class="m-player" (appClickOutside)="onClickOutsideEvent()" [bindClick]="isBindClick">
  <div class="lock">
    <div class="left"><i></i></div>
  </div>
  <div class="hand"></div>
  <div class="container">
    <div class="wrap">
      <div class="btns">
        <i class="prev" (click)="onPrev(currentIndex - 1)"></i>
        <i class="toggle" [class.playing]="isPlaying" (click)="onToggle()"></i>
        <i class="next" (click)="onNext(currentIndex + 1)"></i>
      </div>
      <div class="head" (click)="routerToSongDetail(currentSong?.id)">
        <img [src]="picUrl">
        <i class="mask"></i>
      </div>
      <div class="play">
        <div class="words clearfix">
          <p class="ellipsis margin-bottom-none" [title]="currentSong?.name">
            <a [routerLink]="['/music/songs', currentSong?.id, 'detail']">{{currentSong?.name}}</a>
          </p>
          <ul class="songs margin-bottom-none clearfix">
            <li *ngFor="let item of currentSong?.ar; last as isLast">
              <a [routerLink]="['/music/singers', item.id, 'detail']">{{item.name}}</a>
              <span [hidden]="isLast">/</span>
            </li>
          </ul>
        </div>
        <div class="bar">
          <div class="slider-wrap">
            <!-- 音乐进度条 -->
            <app-music-slider [bufferOffset]="bufferLength" [(ngModel)]="playLength"
              (onSliderLengthChange)="onPlayLengthChangeEvent($event)"></app-music-slider>
            <!-- ./ 音乐进度条 -->
          </div>
          <span class="time">
            <em>{{audioCurrentTime | timeFormat}}</em> / {{audioDuration | timeFormat}}
          </span>
        </div>
      </div>
      <div class="oper">
        <i class="like" title="收藏"></i>
        <i class="share" title="分享"></i>
      </div>
      <div class="ctrl">
        <i class="volume" title="音量" (click)="onShowVolumeSliderEvent()"></i>
        <i [ngClass]="playMode.type" [title]="playMode.label" (click)="onChangeModeEvent()"></i>
        <i class="open" title="播放列表" (click)="onShowPlayPanelEvent()">
          <span></span>
        </i>
        <!-- 音量进度条 -->
        <div class="control-volume" [hidden]="!isShowVolumeSlider">
          <app-music-slider [vertical]="true" [(ngModel)]="volume" (ngModelChange)="onVolumeChangeEvent($event)">
          </app-music-slider>
        </div>
        <!-- ./ 音量进度条 -->
      </div>
      <!-- 音乐列表面板 -->
      <app-music-play-panel [songList]="songList" [playing]="isPlaying" [currentSong]="currentSong"
        [showPanel]="isShowPlayPanel" (onClose)="isShowPlayPanel = false"
        (onChangeSong)="onChangeCurrentSongEvent($event)" (onDeleteSong)="onDeleteSongEvent($event)"
        (onClearSongList)="onClearSongListEvent()">
      </app-music-play-panel>
      <!-- ./ 音乐列表面板 -->
    </div>
  </div>
  <!-- 音频播放 -->
  <audio #audio [src]="currentSong?.url" (canplay)="onCanPlay()" (timeupdate)="onAudioTimeUpdate($event)"
    (ended)="onEnded()"></audio>
  <!-- ./ 音频播放 -->
</div>